<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="https://cdn.staticfile.org/element-ui/2.15.9/theme-chalk/index.css">
    <style>
        a{text-decoration: none;font-size: 14px;text-align: center}
        a:link{color:#cccccc }
        a:hover{color: white}
        .center{width: 1200px;margin: 0 auto}
        .el-dropdown-link {
            cursor: pointer;
            color: #409EFF;
        }
        .el-icon-arrow-down {
            font-size: 12px;
        }
        .el-select .el-input {
            width: 130px;
        }
        .input-with-select .el-input-group__prepend {
            background-color: #fff;
        }
        ul{
            list-style-type: none;
            overflow: hidden;/*解决高度为0 导致的异常*/
        }
        li{
            float: left;
            margin-right: 10px;
        }
        .el-menu-item{
            margin: 0 35px;
        }
        .el-avatar--circle{
            vertical-align: bottom;
        }
        .con{
            margin: 0;
            padding: 0;
            eight: 25px;
            line-height: 25px;
        }
        li.el-menu-item.con{
            height:30px;
        }

    </style>
</head>
<body>
<div id="app">
    <el-container>
        <my-header></my-header>
        <el-main class="center" style="height: 1000px">
            <el-carousel indicator-position="outside" height="400px" width="1000px">
                <el-carousel-item>
                    <img src="blogimg/1.jpeg" width="100%">
                </el-carousel-item>
                <el-carousel-item>
                    <img src="blogimg/2.jpeg" width="100%">
                </el-carousel-item>
                <el-carousel-item>
                    <img src="blogimg/3.jpeg" width="100%">
                </el-carousel-item>
                <el-carousel-item>
                    <img src="blogimg/4.jpeg" width="100%">
                </el-carousel-item>
            </el-carousel>
            <el-row>
                <el-col span="18" style="border:1px solid red">
                    <el-menu>
                        <el-menu-item index="1">热门游记</el-menu-item>
                        <el-menu-item index="2">推荐游记</el-menu-item>
                        <el-menu-item index="3">最新游记</el-menu-item>
                        <el-button type="warning" style="float: right;margin-top: 10px;">搜索</el-button>
                        <el-input v-model="input" placeholder="游记/旅行攻略/目的地" style="
                           width:250px;float: right;margin:10px 5px 0 0"></el-input>
                    </el-menu>
                    <el-card>
                        <el-row>
                            <el-col span="8" style="height:145px;">
                                <img src="blogimg/img1.png">
                            </el-col>
                            <el-col span="16" style="height:145px;">
                                <a href="#">
                                    <p style="color:black;text-align: left;font-size:16px;font-weight: bold;margin-top:0;">两天一晚缙云南乡深度游，打卡那些让人惊艳的小众秘境</p>
                                    <p style="color:#666;font-size:10px;text-align: left;line-height: 20px;">缙云南乡，位于缙云南部，包括舒洪、溶江、双溪口、大源、胡源等乡镇。南乡是缙云的后花园，得天独厚的自然禀赋和厚重悠久的历史文化，孕育了独特的南乡之美。
                                        在南乡一带，这里山水人文秀丽，民俗文化丰富，旅游资源多样，藏着我们所向往的“诗和远方”。
                                        </p>
                                </a>
                                <i style="font-size:13px;" class="el-icon-location-outline"> 苏州</i>
                                <el-avatar :size="20" src="imgs/header.png" style="margin:6px 0 0 40px;"></el-avatar>
                                <span style="font-size: 13px;">欧尼酱</span>
                                <i style="font-size:13px;margin-left: 40px;" class="el-icon-star-off">100</i>
                                <i style="font-size:13px;margin-left: 40px;" class="el-icon-chat-dot-square">100</i>
                                <i style="font-size:13px;margin-left: 40px;" class="el-icon-sugar">100</i>
                                <i style="font-size:13px;margin-left: 40px;" class="el-icon-view">100</i>
                            </el-col>
                        </el-row>
                        <el-row style="margin-top: 15px;">
                            <el-col span="8" style="height:145px;">
                                <img src="blogimg/img1.png">
                            </el-col>
                            <el-col span="16" style="height:145px;">
                                <a href="#">
                                    <p style="color:black;text-align: left;font-size:16px;font-weight: bold;margin-top:0;">两天一晚缙云南乡深度游，打卡那些让人惊艳的小众秘境</p>
                                    <p style="color:#666;font-size:10px;text-align: left;line-height: 20px;">缙云南乡，位于缙云南部，包括舒洪、溶江、双溪口、大源、胡源等乡镇。南乡是缙云的后花园，得天独厚的自然禀赋和厚重悠久的历史文化，孕育了独特的南乡之美。
                                        在南乡一带，这里山水人文秀丽，民俗文化丰富，旅游资源多样，藏着我们所向往的“诗和远方”。
                                        </p>
                                </a>
                                <i style="font-size:13px;" class="el-icon-location-outline"> 苏州</i>
                                <el-avatar :size="20" src="imgs/header.png" style="margin:6px 0 0 40px;"></el-avatar>
                                <span style="font-size: 13px;">欧尼酱</span>
                                <i style="font-size:13px;margin-left: 40px;" class="el-icon-star-off">100</i>
                                <i style="font-size:13px;margin-left: 40px;" class="el-icon-chat-dot-square">100</i>
                                <i style="font-size:13px;margin-left: 40px;" class="el-icon-sugar">100</i>
                                <i style="font-size:13px;margin-left: 40px;" class="el-icon-view">100</i>
                            </el-col>
                        </el-row>
                        <el-row style="margin-top: 15px;">
                            <el-col span="8" style="height:145px;">
                                <img src="blogimg/img1.png">
                            </el-col>
                            <el-col span="16" style="height:145px;">
                                <a href="#">
                                    <p style="color:black;text-align: left;font-size:16px;font-weight: bold;margin-top:0;">两天一晚缙云南乡深度游，打卡那些让人惊艳的小众秘境</p>
                                    <p style="color:#666;font-size:10px;text-align: left;line-height: 20px;">缙云南乡，位于缙云南部，包括舒洪、溶江、双溪口、大源、胡源等乡镇。南乡是缙云的后花园，得天独厚的自然禀赋和厚重悠久的历史文化，孕育了独特的南乡之美。
                                        在南乡一带，这里山水人文秀丽，民俗文化丰富，旅游资源多样，藏着我们所向往的“诗和远方”。
                                        </p>
                                </a>
                                <i style="font-size:13px;" class="el-icon-location-outline"> 苏州</i>
                                <el-avatar :size="20" src="imgs/header.png" style="margin:6px 0 0 40px;"></el-avatar>
                                <span style="font-size: 13px;">欧尼酱</span>
                                <i style="font-size:13px;margin-left: 40px;" class="el-icon-star-off">100</i>
                                <i style="font-size:13px;margin-left: 40px;" class="el-icon-chat-dot-square">100</i>
                                <i style="font-size:13px;margin-left: 40px;" class="el-icon-sugar">100</i>
                                <i style="font-size:13px;margin-left: 40px;" class="el-icon-view">100</i>
                            </el-col>
                        </el-row>

                    </el-card>
                </el-col>
                <el-col span="6" style="border:1px solid red">
                    <a href="blogpost.html" style="background-color: yellow;display:block;height:40px;width:250px;border-radius: 10px;margin:10px 0 0 16px;
                    text-align: center;line-height: 40px;">快来写游记吧...</a>
                    <el-menu>
                        <p>社区热搜榜</p>
                        <el-menu-item class="con"><i style="color:red;font-weight: bold;">1.</i> 2023年高考必胜,向梦想出发</el-menu-item>
                        <el-menu-item class="con"><i style="color:red;font-weight: bold;">2.</i> 2023年高考必胜,向梦想出发</el-menu-item>
                        <el-menu-item class="con"><i style="color:red;font-weight: bold;">3.</i> 2023年高考必胜,向梦想出发</el-menu-item>

                    </el-menu>
                </el-col>
            </el-row>
        </el-main>
        <el-footer>
            <div style="height: 330px;background-color: #727272;color: white;margin: 0 auto">
                <el-row style="width: 1200px;margin: 0 auto" >
                    <el-col span="4">
                        <p style="font-size: 24px;padding-left: 20px;margin-bottom: 0"><i class="el-icon-phone" ></i>服务热线</p>
                        <p style="margin-top: 5px;padding-left: 30px">400  679  6699</p>
                        <p style="font-size: 24px;padding-left: 20px;margin-bottom: 0"><i class="el-icon-message" ></i>意见反馈</p>
                    </el-col>
                    <el-col span="4">
                        <p style="font-weight: bold">关于鹿途</p>
                        <p><a href="/info.html">鹿途简介</a></p>
                        <p><a href="/info.html">法律声明</a></p>
                        <p><a href="/info.html">网站地图</a></p>
                        <p><a href="/info.html">用户协议与隐私条款</a></p>
                    </el-col>
                    <el-col span="4">
                        <p style="font-weight: bold">加盟合作</p>
                        <p><a href="/info.html">合作加盟</a></p>
                        <p><a href="/info.html">商旅合作</a></p>
                        <p><a href="/info.html">门票合作</a></p>
                        <p><a href="/info.html">其他合作</a></p>
                    </el-col>
                    <el-col span="4">
                        <p style="font-weight: bold">联系我们</p>
                        <p><a href="/info.html">联系我们</a></p>
                        <p><a href="/info.html">投诉建议</a></p>
                        <p><a href="/info.html">友情链接</a></p>
                    </el-col>
                    <el-col span="4">
                        <p style="font-weight: bold">旅行服务</p>
                        <p><a href="/info.html">旅游攻略</a></p>
                        <p><a href="/info.html">旅游特价</a></p>
                        <p><a href="/info.html">酒店预订</a></p>
                    </el-col>
                    <el-col span="4">
                        <a href="/" style="font-size: 36px;margin: 0; padding: 0;float: right">
                            <img src="imgs/logo.png" width="150px" height="150px">
                        </a>
                    </el-col>
                </el-row>
                <el-divider ></el-divider>
                <div style="width: 800px; color: aliceblue;font-size: 12px;margin: 0 auto">
                <p style="margin-top: 0">Copyright © 2002-2028  版权所有  鹿途网络科技股份有限公司</p>
                <p>经营许可证编号：合字B2-20180018      备案序号：苏ICP备09033674号 苏公网安备32059002001063号     旅行社业务许可证：L-JS-CJ00076</p>
                <p>国家文旅部全国旅游投诉热线：拨打12345，或登录<a style="font-size: 12px">全国旅游网络投诉举报平台</a></p>
                </div>
            </div>
        </el-footer>

    </el-container>
</div>




<!-- import Vue before Element -->
<script src="https://cdn.staticfile.org/vue/2.6.14/vue.min.js"></script>
<!-- import JavaScript -->
<script src="https://cdn.staticfile.org/element-ui/2.15.9/index.min.js"></script>
<!--引入Axios-->
<script src="https://cdn.bootcss.com/axios/0.18.0/axios.min.js"></script>
<script src="js/my-header.js"></script>

<script>
    let v = new Vue({
        el: '#app',
        data: function () {
            return {
                content: {textarea:"",content:"",imgUrl:""},
                c:'',
                textarea:'',
                circleUrl:"imgs/header.png",
                bannerArr:["blogimg/img.png"],
                input: '',
            }
        },
        methods: {
        },

    })
</script>
</body>
</html>